<template>

  <div class="video" >
    <div class="nav">
        <h1>猫眼电影</h1>
    </div>
    <div class="goTop" v-if="videoList.length!=0 && isShow" ref="shipinBox" @click="goTop">
      <span> <i class="iconfont icon-top" aria-hidden="true"></i></span>
    </div>
    <van-tabs v-model="active">
      <van-tab title="推荐">
        <div
          class="recommand"
          ref="reBox"
          v-if="videoList"
        >
          <template v-for="(item, index) in replaceVideolist">
            <shi-pin-item
              @changevideo="changevideo"
              :videoid="videoid"
              :item="item"
              @click="judgeLook"
              :key="index"
            ></shi-pin-item>
          </template>
        </div>
      </van-tab>
      <van-tab title="热片解读">
        <div
          class="recommand"
          v-if="videoList"
        >
          <template v-for="(item, index) in videoType2">
            <shi-pin-item
              :item="item"
              @click="judgeLook"
              :key="index"
            ></shi-pin-item>
          </template>
        </div>
      </van-tab>
      <van-tab title="预告片">
        <div
          class="recommand"
          v-if="videoList"
        >
          <template v-for="(item, index) in videoType3">
            <shi-pin-item
              :item="item"
              @click="judgeLook"
              :key="index"
            ></shi-pin-item>
          </template>
        </div>
      </van-tab>
    </van-tabs>
 
  </div>
</template>

<script>
import ShiPinItem from "@/components/ShiPinItem.vue";
import _ from 'lodash';

export default {
  props:["curvideoid"],
  data() {
    return {
      active: 0,
      videoList: [],
      currendId: "",
      comNum: 0,
      comTimer: null,
      videoType2: [],
      videoType3: [],
      videoType4: [],
      videoid:"1111",
      isShow:false,
    };
  },
  created() {
    this.getshipin();
  },
  mounted(){
    window.addEventListener("scroll",this.scrollbar);
  },
  beforeDestroy(){
    window.removeEventListener("scroll",this.scrollbar);
  },

  methods: {
    goTop(){
      // console.log(this.$refs.shipinBox.offsetTop);
      document.body.scrollTop=document.documentElement.scrollTop=0;
    },
    async getshipin() {
      let re = await this.axios.get("video/0");
      this.videoList = re.data;
    },
    judgeLook(event) {
      console.log(event);
    },
    scrollbar:_.throttle(function(){
      let reWidth = this.$refs.reBox.offsetHeight-540;
      let cur = window.scrollY;
      let el=document.documentElement||document.body;
      let b=el.clientHeight;
      if(cur>b){
        this.isShow=true;
      }else{
        this.isShow=false;
      }
      if (cur >= reWidth) {
        if (this.comTimer) {
          clearTimeout(this.comTimer);
        }
        ++this.comNum;
        this.axios.get("video/" + this.comNum).then((re) => {
          let data = re.data.data.feeds;
          let arr=this.replaceVideolist
          data.forEach((item) => {
            arr.push(item);
          });
          for(let i=0;i<arr.length;i++){
            for(let j=i+1;j<arr.length;j++){
              if(arr[i].id===arr[j].id){
                arr.splice(j,1);
                j=j-1;
              }
            }
          }
          this.videoList=arr;
        });
      }
    },500),
    changevideo(value){
      this.videoid=value;
    }
  },
  components: {
    ShiPinItem,
  },
  computed: {
    replaceVideolist() {
      if (this.videoList.data) {
        if (this.videoList.data.feeds) {
          return this.videoList.data.feeds;
        }
        return this.videoList.data;
      }
      return this.videoList;
    },
  },
  watch: {
    replaceVideolist() {
      this.replaceVideolist.forEach(item=>{
        if(item.type=="2"){
          if(!this.videoType2.includes(item)){
            this.videoType2.push(item);
          }
        }else if(item.type=="3"){
          if(!this.videoType3.includes(item)){
            this.videoType3.push(item);
          }
        }
      })
    }
  },
};
</script>

<style lang="less" scoped>
.recommand {
  // padding: 10px 0px;
  margin-bottom: 40px;
}
.video{
  .nav{
    background-color: #e54847;
    padding: 6px;
    height: 38px;
    line-height: 38px;
    color: #fff;
    text-align: center;
    font-size: 18px;
  }
}
.goTop{
  position: fixed;
  top: 500px;
  left: 10px;
  z-index: 15;
  line-height: 30px;
  // background: rgba(0, 0, 0, .5);
  // display: inline-block;
  span{
    display: inline-block;
    background: rgba(0, 0, 0, .8);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    color: white;
  }
}
</style>